<template>
	<view class="content">
		<view class="top">
			<image src="/static/image/32530E0C8EE015A92040F86082DACD1E@2x.png" mode="aspectFit"></image>
		</view>
		<view class="chart">
			<image src="/static/image/WechatIMG577.png"></image>
		</view>
		<view class="module">
			<view class="subModule" @tap="orderOnline()">
				<dl>
					<dt class="cutGraph">
						<image src="/static/image/gouwuche-2@2x.png" mode="aspectFit"></image>
					</dt>
					<dd><text>在线下单</text></dd>
				</dl>
			</view>
			<view class="subModule" @click="billQuery()">
				<dl>
					<dt class="cutGraph">
						<image src="/static/image/zhangdan@2x.png" mode="aspectFit"></image>
					</dt>
					<dd><text>账单查询</text></dd>
				</dl>
			</view>
		</view>
		<view class="module">
			<view class="subModule" @click="familyPhotoAlbum()">
				<dl>
					<dt class="cutGraph">
						<image src="/static/image/xiangce@2x.png" mode="aspectFit"></image>
					</dt>
					<dd><text>亲情相册</text></dd>
				</dl>
			</view>
			<view class="subModule" @click="smartHome()">
				<dl>
					<dt class="cutGraph">
						<image src="/static/image/zhinengjiaju@2x.png" mode="aspectFit"></image>
					</dt>
					<dd><text>智能家居</text></dd>
				</dl>
			</view>
		</view>
		<view class="module">
			<view class="subModule" @click="familyManagement()">
				<dl>
					<dt class="cutGraph">
						<image src="/static/image/jiashulaidui@2x.png" mode="aspectFit"></image>
					</dt>
					<dd><text>家属管理</text></dd>
				</dl>
			</view>
			<view class="subModule" @click="healthData()">
				<dl>
					<dt class="cutGraph">
						<image src="/static/image/jiankangshuju@2x.png" mode="aspectFit"></image>
					</dt>
					<dd><text>健康数据</text></dd>
				</dl>
			</view>
		</view>
		<view class="module">
			<view class="subModule" @click="activeCare()">
				<dl>
					<dt class="cutGraph">
						<image src="/static/image/jiashu_yuangong@2x.png" mode="aspectFit"></image>
					</dt>
					<dd><text>主动关怀</text></dd>
				</dl>
			</view>
			<view class="subModule" @click="feedbackSuggestions()">
				<dl>
					<dt class="cutGraph">
						<image src="/static/image/fankuijianyi@2x.png" mode="aspectFit"></image>
					</dt>
					<!-- <dd><text>反馈建议</text></dd> -->
					<dd><text>活动报名</text></dd>
				</dl>
			</view>
		</view>
		<view class="module">
			<view class="subModule" @click="alarmAata()">
				<dl>
					<dt class="cutGraph">
						<image src="/static/image/alarmAata.png" mode="aspectFit"></image>
					</dt>
					<dd><text>告警信息</text></dd>
				</dl>
			</view>
			<view class="subModule" @click="oneCardSolution()">
				<dl>
					<dt class="cutGraph">
						<image src="/static/image/yiqiatongguanli_hover@2x.png" mode="aspectFit"></image>
					</dt>
					<dd><text>一卡通</text></dd>
				</dl>
			</view>
		</view>
		<view class="module">
			<view class="subModule" @click="dailyMA()">
				<dl>
					<dt class="cutGraph">
						<image src="/static/image/meirijiucanshuju@2x.png" mode="aspectFit"></image>
					</dt>
					<dd><text>每日排餐</text></dd>
				</dl>
			</view>
		</view>
		<!--//==================对话框====================//  -->
		<view>
			<view class="retip" v-show="outisShow">
				<view class="tips_Container">
					<image class="srcImg" src="/static/image/Fill 1@2x.png" mode="center"></image>
					<view v-if="dialog != null && dialog != ''" class="txtList">
						<view class="head"><text>{{dialog.receiverName}}&nbsp;:</text></view>
						<view class="scrollView">{{dialog.content}}</view>
						<text>{{dialog.sponsorName}}</text>
					</view>
					<view v-else>
						<text class="txt">~无结果~</text>
					</view>
				</view>
				<view class="Close_tips" @click="closeOutlog()">
					<view class="item" v-for="(value,index) in iconType" :key="index">
						<icon :type="value" size="42" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//==================对话框====================//
				outisShow: true,
				iconType: ['clear'],
				dialog: [],
				userId: '',
				orderonlineurl:''
			}
		},
		onLoad() {
		},
		onShow() {
			this.getUserId();
			if (this.outisShow == true) {
				this.getInfoList();
			}

		},
		watch: {
			userId(newUserId, oldUserId) {
				if (newUserId != oldUserId) {
					if (this.outisShow == true) {
						return false;
					} else if (this.outisShow == false) {
						this.outisShow = true;
						this.getInfoList();
					}
				}
			}
		},
		methods: {
			// 官方下拉刷新
			onPullDownRefresh() {
				// console.log('refresh');
				setTimeout(function() {
					// console.log("刷新")
					// uni.redirectTo({
					// 	url: '/pages/meterCheck/index'
					// })
					uni.stopPullDownRefresh();
				}, 1000);
			},
			orderOnline() {
				// 跳转外部链接h5
				// //#ifdef H5
				//window.location.href = 'http://119.23.63.242/#/';
				//// #endif
				// // #ifdef APP-PLUS
				// plus.runtime.openURL('/') //不需要拼接
				// // plus.runtime.openURL(`http://${jumpUrl}`)//需要拼接
				// // #endif
				uni.navigateTo({
					url: "/pages/orderOnline/index"
				})
			},
			billQuery() {
				uni.navigateTo({
					url: "/pages/billQuery/index"
				})
			},
			familyPhotoAlbum() {
				uni.navigateTo({
					url: "/pages/familyPhotoAlbum/index"
				})
			},
			smartHome() {
				// uni.navigateTo({
				// 	url: "/pages/smartHome/index"
				// })
				uni.navigateTo({
					url:'../smarthome/index'
				})
				// console.log('点击了智能家居按钮');
			},
			familyManagement() {
				uni.navigateTo({
					url: "/pages/familyManagement/index"
				})
			},
			healthData() {
				uni.navigateTo({
					url: "/pages/healthData/index"
				})
			},
			activeCare() {
				uni.navigateTo({
					url: "/pages/activeCare/index"
				})
			},
			feedbackSuggestions() {
				//反馈建议
				// uni.navigateTo({
				// 	url: "/pages/feedbackSuggestions/index"
				// })
				// 活动报名
				uni.navigateTo({
					url: "/pages/registration/index"
				})
			},
			alarmAata() {
				//告警信息
				uni.navigateTo({
					url: "/pages/alarmAata/index"
				})
			},
			oneCardSolution() {
				//一卡通
				uni.navigateTo({
					url: "/pages/card/index"
				})
			},
			dailyMA() {
				//每日排餐
				uni.navigateTo({
					url: "/pages/dailyMealArrang/index"
				})
			},
			//==================对话框====================//
			//----------------------------------------------------
			//获取当前用户id
			getUserId() {
				this.userId = uni.getStorageSync('id');
			},
			//-------------------------------------------------
			//获取接收者的信息列表
			async getInfoList() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-operate/activecare/byReceiver/' + this.userId,
						method: "get",
					})
				if (res.success == true) {
					if (res.body.command != null) {
						this.dialog = res.body.command[0];
					}
				}
			},
			closeOutlog() {
				this.outisShow = false;
			},
		},
	}
</script>

<style lang="scss">
	.top {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: center;
		background-color: #FFFFFF;

		image {
			height: 90rpx;
		}
	}

	.chart {
		width: 100%;
		height: 300rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.module {
		width: 100%;
		height: 220rpx;
		display: flex;
		margin: 30rpx 2%;
	}

	.subModule {
		width: 46%;
		height: 100%;
		border-radius: 10px;
		background-image: url(/static/image/ovalBackupMask.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-size: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 1%;

		.cutGraph {
			width: 100rpx;
			height: 100rpx;

			image {
				width: 100%;
				height: 100%;
			}

			margin-bottom: 4%;
		}

		text {
			font-size: 28rpx;
			font-weight: bold;
		}
	}

	//==================对话框====================//
	.retip {
		background-color: rgba(0, 0, 0, 0.4);
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 999;
		top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.Close_tips {
		background-color: #FFFFFF;
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;

		display: flex;
		flex-direction: column;

		align-items: center;
		justify-content: center;
	}

	.tips_Container {
		width: 680rpx;
		height: 710rpx;
		background-color: #FCF2E9;
		border-radius: 25rpx;
		display: flex;
		flex-direction: column;
		font-weight: bold;
		font-size: 40rpx;
		margin-bottom: 25px;
		position: relative;

		.txtList {
			.head {
				margin: 40rpx 40rpx 0 40rpx;
			}

			.scrollView {
				margin: 16rpx 40rpx 0 60rpx;
				font-size: 40rpx;
				overflow-y: auto;
				width: 84.7%;
				height: 34vh;
				word-break: break-all;
			}

			.scrollView::-webkit-scrollbar {
				display: none;
				width: 0;
				height: 0;
			}

			text:nth-child(3) {
				position: absolute;
				bottom: 0;
				right: 0;
				margin-right: 80rpx;
				margin-bottom: 40rpx;
			}
		}

		.srcImg {
			width: 200rpx;
			height: 120rpx;
			z-index: 99;
			position: absolute;
			left: 50%;
			top: 0;
			transform: translate(-50%, -50%);
		}

		.txt {
			font-size: 48rpx;
			text-align: center;
			line-height: 710rpx;
			display: flex;
			justify-content: center;
		}
	}
</style>
